{% extends 'base.html' %}

{% block title %}
	Development
{% endblock %}

{% block header %}
{% endblock %}

{% block aside %}
	<header id="header">
	<h1>Wayfinder</h1>
	{% comment %}
	{% if user.is_authenticated %}
		<span id="welcome" class="ui-helper-clearfix">Logged in as <span style="font-style:italic">{{ user.username }}</span></span>
	{% endif %}
	{% endcomment %}
	</header>
	<div class="toolbar">
		<div id="toolbar-useraccess">
		{% if user.is_authenticated %}
			<button id="toolbar-logout">Logout</button>
		{% else %}
			<button id="toolbar-login">Login</button>
		{% endif %}
			<a href="http://code.google.com/p/wayfinder/w/list" id="toolbar-wiki" target="_new" title="Wiki page">Wiki</a>
			<button id="toolbar-admin" title="Site administration">Admin</button>
		</div>
		<div id="toolbar-buttons" class="toolbar">
		{% if user.is_authenticated %}
			<h5 class="toolbarheader">Map Utilities<span class="fright help ui-icon ui-icon-help"></span></h5>
			<button id="toolbar-clear">Clear Map</button>
			<div class="toolbar-checkbox">
				<input type="checkbox" id="toolbar-paths" /><label for="toolbar-paths">Hide Paths</label>
			</div>
			<div class="toolbar-checkbox">
				<input type="checkbox" id="toolbar-markers" /><label for="toolbar-markers">Hide Markers</label>
			</div>

			{% include 'findpathform.html' %}

			<div id="clearmap-dialog" title="Clear all markers and paths?">
				<p>
					<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
					All markers and paths will be permanently deleted and cannot be recovered. Are you sure?
				</p>
			</div> <!-- clear map modal dialog -->

			<div id="editnode-dialog" title="Create destination">
				<form action="" id="editnode-form" method="post">
					<div class="field">
						<label for="label">Destination Name:</label>
						<input type="text" name="label" maxlength="100" id="label" required="required" placeholder="destination name"/>
					</div>
				</form>
			</div> <!-- edit node modal dialog -->

			<!-- error template -->
			<script id="error-template" type="text/x-jquery-tmpl">
				<p class="error">${message}</p>
			</script>

			<!-- start jquery template -->
			<div id="toolbar-pathstatslist"></div>
			<script id="toolbar-pathstats" type="text/x-jquery-tmpl">
			<h5 class="toolbarheader">Test Path Stats</h5> 
				<dl class="pathlist">
					<dt>Time to calculate path:</dt>
						<dd>${timeToFind} seconds</dd>
					<dt>Total distance:</dt>
						<dd>${distance} miles</dd>
					<dt>Estimated walking time:</dt>
						<dd>${walkingTime} minutes</dd>
					<dt>Nodes traversed:</dt>
						<dd>${nodesCount}</dd>
				</dl>
			</script>
			<!-- end jquery template -->

			<h5 class="toolbarheader">Destinations<span class="fright help ui-icon ui-icon-help"></span></h5>
			<div id="toolbar-destlist">
			</div>

		{% else %}
			<p class="notification">Log in to get started</p>
		{% endif %}
		</div>
	</div>
{% endblock aside %}

{% block main-content %}
	<div id='geocode-container' class='ui-widget-header'>
		{% if user.is_authenticated %}
			<span id="welcome" class="ui-helper-clearfix">Logged in as {{user.username}}</span>
		{% endif %}
		<span>Look up a location:</span>
		<input id='geocode-address' class='input-search' type='textbox' onkeydown='if (event.keyCode == 13) $("#geocode-btn").click()'>
		<button id='geocode-btn' class="tour_1">Go</button>
	</div>
	<div id='map-canvas' class='ui-helper-clearfix'></div>
{% endblock %}
